JS30 Day 4 筆記

目標

用 8 個範例來熟悉幾個常見的 array 操作

會使用到的資料

const inventors = [
  { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
  { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
  { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
  { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
  { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
  { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
  { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
  { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
  { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
  { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
  { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
  { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
];

const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];

題目

Filter the list of inventors for those who were born in the 1500's

題目：篩選出生於 1500～1599 之間的 inventer
思路：用 filter() 方法，篩選每一個 inventor 的 year，將結果為 true 的資料放入並回傳新陣列
```
 const answer = inventors.filter(inventor=> inventor.year >=1500 && inventor.year < 1600)
```

Give us an array of the inventor first and last names

題目：給一個包含 inventor 的 first name 與 last name 的陣列
思路：用 map() 方法，將每一個 inventor 的 firstName 與 lastname, 分別放入並回傳新陣列 `
```
 const answer = inventors.map(inventor=> `${inventor.first} ${inventor.last}`)
```

Sort the inventors by birthdate, oldest to youngest

題目：跟據 inventor 的出生年份，由大到小排列
思路：用 sort() 方法排序

 // 有 3 種可能
 // a.year - b.year => < 0 (a.year 在前， b.year 在後)
 // a.year - b.year => === 0 (維持原排序)
 // a.year - b.year => >0 (a.year 在後， b.year 在前)
 const answer = inventors.sort((a,b) => a.year - b.year)

How many years did all the inventors live?

題目：把所有 inventor 的年紀加總
思路：用 reduce() 方法累加

for loop 的寫法

 let totalAge = 0
 for(let i = 0; i < inventors.length; i++){
   totalAge += (inventors[i].passed - inventors[i].year)
 }
 return totalAge

reduce() 的寫法

 //初始值 total 設為 0，每次取一個 inventor 的年齡。加回 total 中
 const answer = inventors.reduce((total, inventor)=>{
   return total + (inventor.passed - inventor.year)
 },0)

Sort the inventors by years lived
題目：把所有的 inventor 按照年齡由大到小排序
思路：用sort() 方法，將年齡排序
```
 const answer = inventors.sort((a,b)=> (a.passed - a.year)-(b.passed - b.year))
```
create a list of Boulevards in Paris that contain 'de' anywhere in the name
題目：列出該網頁中，所有包含 'de' 的路名
思路：
- 用querySelctor()、 querySelctorAll() 選取元素
- 將得到的 NodeList 轉成 Array
- 使用map() 操作，取得 textContent
- 然後 filter() 加 includes() 篩選內容是否有包含 'de'
```
const category = document.querySelector('.mw-category')
const links = Array.from(category.querySelectorAll('a'))
// const links = [...category.querySelectorAll('a')]
const de = links
          .map(link=> link.textContent)
          .filter(name=>name.includes('de'))
```

sort Exercise：Sort the people alphabetically by last name
題目：把所有的 inventor 按照 last name 的順序排序
思路：先處理 people 資料，用split() 分別取得 inventor 的 first name 與 last name, 再將 last name 用 sort()排序

 const answer = people.sort((a,b)=>{
   // split 的結果會回傳一個陣列
   // 用 ES6 的解構賦值語法，直接將陣列的回傳值設為變數的值

   let [aFirst , aLast] = a.split(', ')
   let [bFirst , bLast] = b.split(', ')

   // 兩層的三元運算子
   return aLast > bLast ? 1 : bLast > aLast ? -1 : 0
 })

Reduce Exercise：Sum up the instances of each of these
題目：計算以下的 data 內每個種類的數量
思路：用reduce()方法加總

 const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pogostick'];

 // 初始值為一個空物件 obj = {}
 const answer = data.reduce((obj, item)=>{
   // 如果物件中沒有此項目 item， 新增 key 為 item，value 設為 1
   if(!obj[item]) obj[item] = 1

   // 如果物件中有此項目 item， 則 value 加 1
   else obj[item]++

   // 回傳 obj
   return obj

 },{})